<template>
  <div class="count-container">
    <count-up
      :start-val="startVal"
      :end-val="endVal"
      :durations="durations"
      :decimals-places="decimals"
      :options="options"
    ></count-up>
    <div
      class="count-unit"
      :style="{ fontSize: `${unitFontSize}px` }"
    >
      {{ unit }}
    </div>
  </div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue'
import CountUp from 'vue-countup-v3'
import type { CountUpOptions } from 'vue-countup-v3'

export default defineComponent({
  name: 'BasicCount',
  components: { CountUp },
  props: {
    startVal: {
      type: Number,
      default: () => 0
    },
    endVal: {
      type: Number,
      default: () => 0
    },
    unit: {
      type: String,
      default: ''
    },
    unitFontSize: {
      type: Number,
      default: 14
    },
    useGrouping: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const func = () => {}
    onMounted(() => {})
    const data = reactive({
      startVal: props.startVal,
      endVal: props.endVal,
      durations: 1,
      decimals: 0,
      options: {
        useGrouping: props.useGrouping
      } as CountUpOptions,
      unit: props.unit,
      unitFontSize: props.unitFontSize
    })
    return {
      ...toRefs(data),
      func
    }
  }
})
</script>
<style lang="scss" scoped>
/* @import url(); */
.count-container {
  display: flex;
  align-items: baseline;
  .count-unit {
    margin-left: 5px;
  }
}
</style>
